<template>
  <div>
    <el-container>
      <el-header height="70px">
        <div style="height:20px; font-size: 15px;background-color: rgba(205,205,205,0.2)">
          <div style="float: left; margin-left: 20px">
            <div>业务模块 > 商圈管理</div>
          </div>
        </div>
        <div style="height: 40px;margin-top: 10px;min-height: 60px;font-size: 20px">
          <el-form ref="selectBusiness" :model="selectBusiness" :inline="true" label-width="70px">
            <el-col :span="7">
              <el-form-item label="商圈名称" prop="sqmc">
                <el-input size="mini" v-model="selectBusiness.sqmc" style="width: 90%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="区域" prop="qywzid">
                <el-cascader size="mini"
                  v-model="selectBusiness.qywzid"
                  :options="options"
                  :props="props"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-button size="mini" type="primary" @click="getBusiness()">确定</el-button>
              <el-button size="mini" @click="toRestFild('selectBusiness')">重置</el-button>

            </el-col>
          </el-form>
        </div>
      </el-header>
      <el-main>
        <div style="float: left">
          <el-button @click="addBusiness()" type="danger" size="mini">添加</el-button>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="sqlsh"
          height="350"
          default-expand-all>
          <el-table-column
            prop="sqmc"
            align="center"
            label="商圈名称">
          </el-table-column>
          <el-table-column
            label="区域位置"
            align="center"
          >
            <template slot-scope="scope">
              <el-cascader
                v-model="scope.row.qywzid.split(';').map(Number)"
                :options="options"
                :props="props"></el-cascader>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="中心">
            <template slot-scope="scope">
              <el-popover
                placement="bottom"
                title="地图"
                width="300"
                trigger="click"
              >
                <div style="width: 300px;height: 250px">
                  <el-amap v-if="scope.row.sqlsh === showNum" vid="amapDemo"
                           :center="[scope.row.center.split(',')[0],scope.row.center.split(',')[1]]" :zoom="15"
                           :pitch="66">
                    <el-amap-marker :position="[scope.row.center.split(',')[0],scope.row.center.split(',')[1]]"
                                    :vid="index">
                    </el-amap-marker>
                  </el-amap>

                </div>
                <el-button slot="reference" @click="showNum = scope.row.sqlsh" type="text">{{
                    scope.row.center
                  }}
                </el-button>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime">
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
          >
            <template slot-scope="scope">
              <el-button @click.native.prevent="editBusiness(scope)"
                         type="text"
              >编辑
              </el-button>
              <el-button @click.native.prevent="deleteBusiness(scope)"
                         type="text"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>

        <el-dialog
          :before-close="handleClose"
          :title="title"
          :visible.sync="dialogVisible"
          width="500">
          <div style="height: 200px">
            <el-form ref="business" :model="business" label-width="100px">
              <el-col :span="12">
                <el-form-item label="id:" prop="sqlsh">
                  <el-input v-model="business.sqlsh" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item :rules="[{ required: true, message: '请选择区域位置', trigger: 'blur' }]" label="区域位置:" prop="qywzid">
                  <el-cascader
                    v-model="business.qywzid"
                    :options="options"
                    :props="props"></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :rules="[{ required: true, message: '请输入商圈名称', trigger: 'blur' }]" label="商圈名称:" prop="sqmc">
                  <el-autocomplete
                    v-model="business.sqmc"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
                    :trigger-on-focus="false"
                    style="font-size: 5px">
                    <template slot-scope="{ item }">
                      <a :title="item.value" style="text-decoration:none">{{item.value}}</a>
                    </template>
                  </el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item :rules="[{ required: true, message: '请选择商圈列表', trigger: 'blur' }]" label="中心:" prop="center">
                  <el-input v-model="business.center" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
          <span style="float: bottom; margin-bottom: 30px" slot="footer" class="dialog-footer">
                            <el-button @click="cancel()">取 消</el-button>
                          <el-button type="primary" @click="sureBusiness()">确 定</el-button>
                        </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import MyMap from "../../../components/MyMap";

export default {
  name: "businessModule",
  components: {MyMap},
  comments: [MyMap,],
  data() {
    return {
      trueBusiness: {
        cityCode: '',
        sqmc: '',
        center: '',
        sqlsh: '',
        qywzid: ''
      },
      restaurants: [],
      options: [{areaId: '1', areaName: '123'}],
      props: {
        value: 'areaId',
        label: 'areaName',
        children: 'children'
      },
      selectBusiness: {
        sqmc: '',
        qywzid: [],
      },
      tableData: [],
      currentPage1: 1,
      pageSize: 10,
      total: 0,
      title: '',
      dialogVisible: false,
      business: {
        sqlsh: '',
        sqmc: '',
        qywzid: '',
        center: '',
      },
      showNum: '',
    }
  },
  mounted() {
    this.getAreaTree()
    this.getBusiness()
  },
  methods: {
    querySearch(queryString, cb) {
      if (this.business.qywzid.length > 0) {
        this.$axios({
          url: '/gaode/getInfoByKeywords',
          method: 'get',
          params: {
            keywords: this.business.sqmc,
            qywzid: this.business.qywzid[this.business.qywzid.length - 1],
            types:'060000'
          }
        }).then(res => {
          this.restaurants = res.data.data
          this.restaurants.filter(item => {
            item.value = item.name + " - " + item.adname + " - "+item.type.split(";")[0]
          })
          cb(this.restaurants);
        })
        // 调用 callback 返回建议列表的数据
      }
    },
    editBusiness(scope) {
      this.$nextTick(() => {
        let data = scope.row
        this.business = {
          ...data,
          qywzid: data.qywzid.split(';').map(Number)
        }
        this.trueBusiness = {
          sqmc: data.sqmc,
          sqlsh: data.sqlsh,
          qywzid: data.qywzid,
          center: data.center
        }
      })
      this.title = "修改商圈"
      this.dialogVisible = true
    },
    deleteBusiness(scope) {
      this.$confirm('确认删除？')
        .then(_ => {
          this.$axios({
            url: '/business/deleteBusiness',
            method: 'delete',
            params: {
              sqlsh: scope.row.sqlsh
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$message.success("操作成功！")
              this.getBusiness()
            } else {
              this.$message.error("系统出错，请联系管理员！")
            }
          })
        })
        .catch(_ => {
        });

    },
    handleSelect(val) {
      this.business.sqmc = val.name
      this.business.center = val.location
      this.trueBusiness.center = val.location
      this.trueBusiness.sqmc = val.name
      this.trueBusiness.cityCode = val.adcode
      this.trueBusiness.qywzid = this.business.qywzid.join(';')
    },
    getBusiness() {
      this.$axios({
        url: '/business/getBusinessPage',
        method: 'get',
        params: {
          sqmc: this.selectBusiness.sqmc,
          qywzid: this.selectBusiness.qywzid.join(';'),
          pageNo: this.currentPage1,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        } else {
          this.$message.error("系统出错，请联系管理员！")
        }
      })
    },
    getAreaTree() {
      this.$axios({
        url: "/area/getAreaTree",
        get: "get",
      }).then(res => {
        this.options = res.data.data
      })
    },
    toRestFild(ref) {
      this.$nextTick(() => {
        this.$refs[ref].resetFields()
      })
    },
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.getBusiness()
    },
    addBusiness() {
      this.title = "新增商圈"
      this.dialogVisible = true
    },
    handleClose() {
      this.toRestFild('business')
      this.dialogVisible = false
    },
    sureBusiness() {
      let url
      if (this.title === '新增商圈') {
        url = '/business/addBusiness'
      } else {
        url = '/business/editBusiness'
      }

      this.$refs['business'].validate(validate=>{
        if (validate){
          this.$axios({
            url: url,
            method: 'post',
            data: {
              ...this.trueBusiness
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.getBusiness()
              this.toRestFild('business')
              this.trueBusiness = {
                cityCode: '',
                sqmc: '',
                center: '',
                sqlsh: '',
                qywzid: ''
              };
              this.dialogVisible = false
              this.$message.success("操作成功！")
            } else {
              this.$message.error("操作失败，请联系管理员！")
            }
          })
        }
      })
    },
    cancel() {
      this.toRestFild('business')
      this.dialogVisible = false
    },
  }
}
</script>

<style scoped>

</style>
